<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Xenon Boostrap Admin Panel" />
    <meta name="author" content="" />
    <title>申报系统-登录</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
    <link rel="stylesheet" href="__BASE__/css/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="__BASE__/css/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="__BASE__/css/bootstrap.css">
    <link rel="stylesheet" href="__BASE__/css/xenon-core.css">
    <link rel="stylesheet" href="__BASE__/css/xenon-forms.css">
    <link rel="stylesheet" href="__BASE__/css/xenon-components.css">
    <link rel="stylesheet" href="__BASE__/css/xenon-skins.css">
    <link rel="stylesheet" href="__BASE__/css/custom.css">

    <script src="__BASE__/js/jquery-1.11.1.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="__BASE__/js/html5shiv.min.js"></script>
    <script src="__BASE__/js/respond.min.js"></script>
    <style>
        .hidden{display:none;}
    </style>
    <![endif]-->


</head>
<body class="page-body login-page login-light">


<div class="login-container">

    <div class="row">

        <div class="col-sm-6">

            <!-- Errors container -->
            <div class="errors-container">


            </div>

            <!-- Add class "fade-in-effect" for login form effect -->
            <form method="post" role="form" id="login" class="login-form fade-in-effect">

                <div class="login-header">
                    <a href="javascript:;" class="logo">
                        <img src="__BASE__/images/logo-white-bg@2x.png" alt="" width="80" />
                        <span>登录中心</span>
                    </a>

                    <p>亲爱的用户，欢迎使用!</p>
                </div>


                <div class="form-group">
                    <label class="control-label" for="username">用户名</label>
                    <input type="text" class="form-control" name="username" id="username" autocomplete="off" />
                </div>

                <div class="form-group">
                    <label class="control-label" for="passwd">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <input type="password" class="form-control" name="passwd" id="passwd" autocomplete="off" />
                </div>

                <div id="yzmPlace" class="hidden">
                    <div class="form-group">
                        <label class="control-label" for="yzm">验证码</label>
                        <input type="password" class="form-control" name="yzm" id="yzm" autocomplete="off" />
                    </div>
                    <div style="margin-bottom: 10px;">
                        <img src='/captcha.html' onclick="this.src='/captcha.html?t='+Math.random()" title="如提示验证码错误请点击刷新验证码！"/><br/>如提示验证码错误请点击刷新验证码！
                    </div>
                </div>


                <div class="form-group">
                    <button type="submit" class="btn btn-primary  btn-block text-left">
                        <i class="fa-lock"></i>
                        马上登录
                    </button>
                </div>

                <div class="login-footer">
                    <!--<a href="#">忘记密码?</a>-->

                    <div class="info-links">
                        <a href="#">服务条款</a> -
                        <a href="#">隐私政策</a>
                    </div>

                </div>

            </form>

            <!-- External login -->
            <!-- 				<div class="external-login">
                                <a href="#" class="facebook">
                                    <i class="fa-facebook"></i>
                                    Facebook Login
                                </a>
                                <a href="#" class="twitter">
                                    <i class="fa-twitter"></i>
                                    Login with Twitter
                                </a>
                                <a href="#" class="gplus">
                                    <i class="fa-google-plus"></i>
                                    Login with Google Plus
                                </a>
                            </div>-->

        </div>

    </div>

</div>



<!-- Bottom Scripts -->
<script src="__BASE__/js/bootstrap.min.js"></script>
<script src="__BASE__/js/TweenMax.min.js"></script>
<script src="__BASE__/js/resizeable.js"></script>
<script src="__BASE__/js/joinable.js"></script>
<script src="__BASE__/js/xenon-api.js"></script>
<script src="__BASE__/js/xenon-toggles.js"></script>
<script src="__BASE__/js/jquery-validate/jquery.validate.min.js"></script>
<script src="__BASE__/js/toastr/toastr.min.js"></script>


<!-- JavaScripts initializations and stuff -->
<script src="__BASE__/js/xenon-custom.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($)
    {
        // Reveal Login form
        setTimeout(function(){ $(".fade-in-effect").addClass('in'); }, 1);

        // Validation and Ajax action
        $("form#login").validate({
            rules: {
                username: {
                    required: true
                },

                passwd: {
                    required: true
                }
            },

            messages: {
                username: {
                    required: '请输入用户名'
                },

                passwd: {
                    required: '请输入密码'
                }
            },

            // Form Processing via AJAX
            submitHandler: function(form)
            {
                show_loading_bar(70); // Fill progress bar to 70% (just a given value)

                var opts = {
                    "closeButton": true,
                    "debug": false,
                    "positionClass": "toast-top-full-width",
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };

                $.ajax({
                    url: "{:url('/system/Sign/check')}",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        do_login: true,
                        username: $(form).find('#username').val(),
                        password: $(form).find('#passwd').val(),
                        yzm: $(form).find('#yzm').val(),
                    },
                    success: function(resp)
                    {
                        console.log(resp);
                        show_loading_bar({
                            delay: .5,
                            pct: 100,
                            finish: function(){

                                // Redirect after successful login page (when progress bar reaches 100%)
                                if(resp.code <= 0){
                                    window.location.href = "{:url('/base/Index/index')}";
                                }else{
                                    if(resp.code > 100){
                                        $('#yzmPlace').removeClass('hidden');
                                    }
                                    toastr.error( resp.msg, "错误:", opts);
                                    // $passwd.select();
                                }
                            }
                        });

                    }
                });

            }
        });

        // Set Form focus
        $("form#login .form-group:first .form-control").focus();

    });
</script>

</body>
</html>